<template>
	<n-modal
		class="base-popup text-t-1"
		:show="modelValue"
		:on-mask-click="() => maskClosable && onClose()"
		:on-after-enter="onOpen"
		:trap-focus="false"
		v-bind="$attrs">
		<div
			class="max-w-full bg-bg-1 flex flex-col"
			:class="
				isDesktop
					? 'w-[500px] rounded'
					: 'fixed bottom-0 w-full max-h-[calc(100%-60px)] rounded-t-lg'
			">
			<div
				v-if="!hideHeader"
				:class="[
					{ 'h-12 flex justify-center items-center shrink-0': !titleClass },
					'relative text-center',
					titleIcon ? 'text-lg' : 'text-xl',
					titleClass
				]">
				<div class="absolute left-3 top-3 z-10 flex text-white">
					<slot name="left">
						<base-icon
							v-if="isGoBack"
							name="back2"
							class="text-2xl cursor-pointer z-10"
							@click="onGoBack" />
					</slot>
				</div>
				<slot name="title">
					<base-icon v-if="titleIcon" class="ml-3 mr-1 text-2xl text-t-3" :name="titleIcon" />
					<base-text :text="title" :textT="titleT" v-if="title || titleT" />
					<div v-if="titleIcon" class="flex-auto" />
				</slot>
				<div class="absolute right-3 top-3 z-10 flex text-white">
					<slot name="right">
						<base-icon
							v-if="closable"
							name="close"
							class="text-2xl cursor-pointer text-t-1"
							@click="onClose" />
					</slot>
				</div>
			</div>
			<slot name="sub-header"></slot>
			<div class="basis-full overflow-y-auto" :class="contentClass">
				<n-scrollbar ref="scrollbarRef" :on-scroll="onScroll">
					<slot></slot>
				</n-scrollbar>
			</div>
			<slot name="footer"></slot>
		</div>
	</n-modal>
</template>

<script lang="ts" setup>
import { NModal, NScrollbar } from 'naive-ui'
import BaseIcon from '@/components/base/icon/index.vue'
import BaseText from '@/components/base/text/index.vue'
import { provide, ref, Ref } from 'vue'
import { isDesktop } from '@/hooks'

defineOptions({ name: 'BasePopup' })

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	title: {
		type: String,
		default: ''
	},
	titleT: {
		type: [String, Array],
		default: ''
	},
	titleClass: {
		type: String,
		default: ''
	},
	titleIcon: {
		type: String,
		default: ''
	},
	contentClass: {
		type: String,
		default: ''
	},
	isGoBack: {
		type: Boolean,
		default: false
	},
	closable: {
		type: Boolean,
		default: true
	},
	maskClosable: {
		type: Boolean,
		default: true
	},
	closeWithBack: {
		type: Boolean,
		default: true
	},
	hideHeader: {
		type: Boolean,
		default: false
	}
})

const emits = defineEmits(['update:modelValue', 'close', 'open', 'goBack'])

const scrollY = ref(0)

const resetScroll = () => (scrollbarRef.value as any).scrollTo({ top: 0 })

const scrollbarRef = ref(null)

provide<Ref<number>>('scrollY', scrollY)
provide<any>('resetScroll', resetScroll)

const onScroll = (e: any) => {
	scrollY.value = e.target.scrollTop
}

const onClose = () => {
	emits('update:modelValue', false)
	emits('close')
	if (props.closeWithBack) emits('goBack')
}

const onOpen = () => {
	emits('open')
}

const onGoBack = () => {
	emits('update:modelValue', false)
	emits('goBack')
}
</script>

<style lang="scss" scoped>
.base-popup {
	:deep(.n-scrollbar-content) {
		min-height: 100%;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
	}
}
</style>
